<template>
  <div class="app-container">

    <!-- 一个简单的输入框，只绑定了一个监视属性，用来进行搜索功能实现 -->
    <el-input
      v-model="filterText"
      placeholder="Filter keyword"
      style="margin-bottom: 30px"
    />

    <!--
        ref 一个标记，防止有相同组件产生冲突
        :data="data2" 数据源
        :props="defaultProps" 一个配置项，参考 data 中的注释
        :filter-node-method="filterNode" 设置组件的检索回调函数
        样式：
         class="filter-tree"
         default-expand-all
    -->
    <el-tree
      ref="tree2"
      :data="data2"
      :props="defaultProps"
      :filter-node-method="filterNode"
      class="filter-tree"
      default-expand-all
    />
  </div>
</template>

<script>
  import subject from "@/api/edu/subject";
  export default {
    data() {
      return {
        filterText: "",
        data2: [], //返回所有分类数据
        defaultProps: {
          children: "children", // 设置树列表数据源中，子列表的统一名称，告诉组件，那个字段是标记这个数组是一个子列表的
          label: "title", // 设置子列表显示的值，比如  children : [ title: "子级列表", args : "其他参数"]
        },
      };
    },
    created() {
      // 初始化获取数据，展示列表
      this.getAllSubjectList();
    },
    watch: {
      filterText(val) {

        // 相当于 根据 id 来调用方法，这里是调用组件的过滤方法
        this.$refs.tree2.filter(val);
      },
    },

    methods: {
      // 获取数据方法
      getAllSubjectList() {
        subject.getSubjectList().then((response) => {
          this.data2 = response.data.children;
        });
      },

      // 检索回调函数
      filterNode(value, data) {
        if (!value) return true;

        // toLowerCase() 表示将字符串都转换为小写
        return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1;
      },
    },
  };
</script>
